<template>
  <view class="home">
    <!-- <view class="header">
      <view class="left">
        <view class="x-icon">
          <span class="iconfont icon-cuowu"></span>
        </view>
      </view>
      <view class="hearder-title">内蒙古自治区“双随机”</view>
      <view class="right">
        <view class="x-icon">
          <span class="iconfont icon-caidan_2"></span>
        </view>
      </view>
    </view> -->
    <view class="main" :v-model="State">
      <view class="content">
        <span class="title">级别</span>
        <span class="info">消防安全重点单位</span>
      </view>
      <view class="content">
        <span class="title">检查形式</span>
        <span class="info">消防监督抽查</span>
      </view>
      <view class="content">
        <span class="title">消防监督检察员</span>
        <span class="info">龚龙江/云鹏</span>
      </view>
      <view class="content">
        <span class="title">检查时间</span>
        <span class="info">2022-01-26 12:16:00</span>
      </view>
      <view :class="classtype" @click="changestate">
        <view class="menu-content content">
          <view class="menu-title">消防许可及验收备案</view>
          <view class="down-top">
            <span
              :class="Statetype"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info"></view>
      </view>
      <view :class="classtype" @click="changestate">
        <view class="menu-content content">
          <view class="menu-title">消防安全管理</view>
          <view class="down-top">
            <text
              :class="Statetype"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></text>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title">消防安全制度</span>
              <span class="info">有</span>
            </li>
            <li>
              <span class="title">灭火及应急疏散预案</span>
              <span class="info">有</span>
            </li>
            <li>
              <span class="title">员工消防安全培训</span>
              <span class="info">有</span>
            </li>
            <li>
              <span class="title">消防安全管理人</span>
              <span class="info">确定</span>
            </li>
            <li>
              <span class="title">防火检查、巡查</span>
              <span class="info"></span>
            </li>
            <li>
              <span class="title"
                >消防设施、器材、消防安全标志定期组织维修保养</span
              >
              <span class="info">有记录</span>
            </li>
            <li>
              <span class="title">消防演练</span>
              <span class="info">有记录</span>
            </li>
            <li>
              <span class="title">消防档案</span>
              <span class="info">有</span>
            </li>
            <li>
              <span class="title">消防重点部位</span>
              <span class="info">确定</span>
            </li>
            <li>
              <span class="title">承担灭火和组织疏散任务的人员</span>
              <span class="info">确定</span>
            </li>
            <li>
              <span class="title">其他情况</span>
              <span class="info">无</span>
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
             <!-- <img src="./img/2.jpg" alt="" />
              <img src="./img/2.jpg" alt="" />
              <img src="./img/2.jpg" alt="" />
              <img src="./img/2.jpg" alt="" /> -->
            </view>
          </view>
        </view>
      </view>
      <view :class="classtype" @click="changestate">
        <view class="menu-content content">
          <view class="menu-title">建筑防火</view>
          <view class="down-top">
            <span
              :class="State ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title"
                >生产、储存、经营易燃易爆危险品的场所与居住场所设置在同一建筑物内</span
              >
              <span class="info">不涉及</span>
            </li>
            <li>
              <span class="title"
                >生产、存储、经营其他物品的场所与居住场所设置在同一建筑物内</span
              >
              <span class="info">不涉及</span>
            </li>
            <li>
              <span class="title"
                >人员密集场所外墙门窗上设置影响逃生、灭火救援的障碍物</span
              >
              <span class="info">不涉及</span>
            </li>
            <li>
              <span class="title">消防车通道</span>
              <span class="info">四周全部车道</span>
            </li>
            <li>
              <span class="title">防火间距</span>
              <span class="info">四周全部车道</span>
            </li>
            <li>
              <span class="title">防火分区</span>
              <span class="info">整体</span>
            </li>
            <li>
              <span class="title">人员密集场所装修材料：</span>
              <span class="info">不涉及</span>
            </li>
            <li>
              <span class="title">检查情况</span>
              <span class="info"
                >经检查、该单位消防车通道畅通；防火分区面积符合标准规定；装修使用材料达到标准要求。</span
              >
            </li>
            <li>
              <span class="title">应急广播</span>
              <span class="info">无</span>
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
              <!-- <img src="./img/2.jpg" alt="" />
              <img src="./img/2.jpg" alt="" />
              <img src="./img/2.jpg" alt="" />
              <img src="./img/2.jpg" alt="" /> -->
            </view>
          </view>
        </view>
      </view>
      <view :class="classtype" @click="changestate">
        <view class="menu-content content">
          <view class="menu-title">安全疏散</view>
          <view class="down-top">
            <span
              :class="State ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title">疏散通道</span>
              <span class="info">一楼楼梯口</span>
            </li>
            <li>
              <span class="title">安全出口</span>
              <span class="info">一楼楼梯口</span>
            </li>
            <li>
              <span class="title">应急照明</span>
              <span class="info">一楼西侧</span>
            </li>
            <li>
              <span class="title">疏散指示标志</span>
              <span class="info">一楼厨房门口</span>
            </li>
            <li>
              <span class="title">避难层：</span>
              <span class="info">无</span>
            </li>
            <li>
              <span class="title">应急广播</span>
              <span class="info">无</span>
            </li>
            <li>
              <span class="title">检查情况</span>
              <span class="info"
                >经检查，该单位疏散通道、安全出口能够保持通畅、应急照明、疏散指示标志设置符合要求且质量合格</span
              >
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
              <!-- <img src="./img/2.jpg" alt="" />
              <img src="./img/2.jpg" alt="" />
              <img src="./img/2.jpg" alt="" />
              <img src="./img/2.jpg" alt="" /> -->
            </view>
          </view>
        </view>
      </view>
      <view :class="classtype" @click="changestate">
        <view class="menu-content content">
          <view class="menu-title">消防控制室</view>
          <view class="down-top">
            <span
              :class="State ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title">消防控制室</span>
              <span class="info">无</span>
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
            
            </view>
          </view>
        </view>
      </view>
      <view :class="classtype" @click="changestate">
        <view class="menu-content content">
          <view class="menu-title">消防设施器材-火灾自动报警装置</view>
          <view class="down-top">
            <span
              :class="State ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title">火灾自动报警系统</span>
              <span class="info">有</span>
            </li>
            <li>
              <span class="title">探测器</span>
              <span class="info">一楼大厅</span>
            </li>
            <li>
              <span class="title">手动报警器</span>
              <span class="info">办公楼后院第二车库</span>
            </li>
            <li>
              <span class="title">控制设备</span>
              <span class="info">控制柜</span>
            </li>
            <li>
              <span class="title">其他设施</span>
              <span class="info">无</span>
            </li>
            <li>
              <span class="title">抽查部位</span>
              <span class="info"></span>
            </li>
            <li>
              <span class="title">检查情况</span>
              <span class="info"
                >经抽查测试，消防控制室能够正常接收火灾报警信号，火灾探测器、控制设备均完好有效。车库一手动报警器损坏</span
              >
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
            
            </view>
          </view>
        </view>
      </view>
      <view :class="classtype" @click="changestate">
        <view class="menu-content content">
          <view class="menu-title">消防设施器材-消防给水装置</view>
          <view class="down-top">
            <span
              :class="State ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title">消防给水设施</span>
              <span class="info">有</span>
            </li>
            <li>
              <span class="title">消防水池</span>
              <span class="info">办公楼后院</span>
            </li>
            <li>
              <span class="title">消防水箱</span>
              <span class="info">办公楼四楼</span>
            </li>
            <li>
              <span class="title">消防水泵</span>
              <span class="info"></span>
            </li>
            <li>
              <span class="title">室内消火栓</span>
              <span class="info">一楼厨房门口</span>
            </li>
            <li>
              <span class="title">室外消火栓</span>
              <span class="info">无</span>
            </li>
            <li>
              <span class="title">水泵接合器</span>
              <span class="info">无</span>
            </li>
            <li>
              <span class="title">稳压设施</span>
              <span class="info">无</span>
            </li>
            <li>
              <span class="title">其他设施</span>
              <span class="info">无</span>
            </li>
            <li>
              <span class="title">抽查部位</span>
              <span class="info"></span>
            </li>
            <li>
              <span class="title">检查情况</span>
              <span class="info"
                >经检查，该单位消防水池、消防水箱的水量达到消防用水要求；消防水泵、消火栓供水压力正常、稳压工作正常。
              </span>
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
           
            </view>
          </view>
        </view>
      </view>
      <view :class="classtype" @click="changestate">
        <view class="menu-content content">
          <view class="menu-title">消防设施器材-自动灭火系统</view>
          <view class="down-top">
            <span
              :class="State ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title">自动喷水灭火系统</span>
              <span class="info">无</span>
            </li>
            <li>
              <span class="title">其他自动灭火系统</span>
              <span class="info">无</span>
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
             
            </view>
          </view>
        </view>
      </view>
      <view :class="classtype" @click="changestate">
        <view class="menu-content content">
          <view class="menu-title">消防设施器材-其他设施器材</view>
          <view class="down-top">
            <span
              :class="State ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info">
          <ul>
            <li>
              <span class="title">防火门：</span>
              <span class="info">无</span>
            </li>
            <li>
              <span class="title">防火卷帘</span>
              <span class="info">无</span>
            </li>
            <li>
              <span class="title">防排烟设施</span>
              <span class="info">无</span>
            </li>
            <li>
              <span class="title">灭火器</span>
              <span class="info">一楼厨房门口</span>
            </li>
            <li>
              <span class="title">其他设施</span>
              <span class="info">无</span>
            </li>
            <li>
              <span class="title">抽查部位</span>
              <span class="info">无</span>
            </li>
            <li>
              <span class="title">检查情况</span>
              <span class="info"
                >经检查，该单位灭火器配置类型正确，压力正常</span
              >
            </li>
          </ul>
          <view class="Site">
            <span class="info Site-title">现场照片</span>
            <view class="Site-photos">
            </view>
          </view>
        </view>
      </view>
      <view :class="classtype" @click="changestate">
        <view class="menu-content content">
          <view class="menu-title">其他消防安全管理</view>
          <view class="down-top">
            <span
              :class="State ? 'down' : 'up'"
              class="iconfont icon-jiantou_liebiaozhankai_o"
            ></span>
          </view>
        </view>
        <view class="menu-content-info"></view>
        <ul>
          <li>
            <span class="title">电器产品的线路定期维护、检测</span>
            <span class="info">不涉及</span>
          </li>
          <li>
            <span class="title">燃气用具的管路定期维护、检测</span>
            <span class="info">不涉及</span>
          </li>
          <li>
            <span class="title"
              >违反规定使用明火作业或在具有火灾、爆炸危险场所吸烟、使用明火</span
            >
            <span class="info">不涉及</span>
          </li>
          <li>
            <span class="title"
              >违反消防安全规定进入生产、存储易燃易爆危险品场所</span
            >
            <span class="info">不涉及</span>
          </li>
          <li>
            <span class="title"
              >违反有关消防技术标准和管理规定生产、存储、运输、销售、使用、销毁易燃易爆危险品</span
            >
            <span class="info">不涉及</span>
          </li>
          <li>
            <span class="title">其他情况</span>
            <span class="info">无</span>
          </li>
        </ul>
        <view class="Site">
          <span class="info Site-title">现场照片</span>
          <view class="Site-photos">
            <img src="../img/2.jpg" alt="" />
            <img src="../img/2.jpg" alt="" />
            <img src="../img/2.jpg" alt="" />
            <img src="../img/2.jpg" alt="" />
          </view>
        </view>
      </view>
      <view class="kongge"></view>
      <view class="footer">
        <view class="content">
          <span class="title">检查结果</span>
          <span class="info">责令限期改正</span>
        </view>
        <view class="content">
          <span class="title">当事人拒绝签字</span>
          <span class="info">否</span>
        </view>
        <view class="content">
          <span class="title">备注</span>
          <span class="info">无</span>
        </view>
      </view>
      <view class="inspector">
       <view class="applicant-title">
            <view class="strip"></view>
            <view class="menu-title people">被检查单位随同检查人员（签名）:</view>
      </view>
      <view class="autograph">
          <view class="autograph-photos">
           <img src="../img/2.jpg" alt="" />
            <img src="../img/2.jpg" alt="" />
          </view>
        </view>
        <view class="kongge2"></view>
       <view class="applicant-title">
            <view class="strip"></view>
            <view class="menu-title people"></view>
            <view class="menu-title people">主/协检查人员（签名）:</view>
      </view>
      <view class="autograph">
          <view class="autograph-photos">
           <img src="../img/2.jpg" alt="" />
            <img src="../img/2.jpg" alt="" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      State: 1,
    };
  },
  methods: {
    changestate() {
      this.State = !this.State;
    },
  },
  computed: {
    classtype() {
      return this.State ? "applicant-wrapper" : "applicant-wrapper-two";
    },
    Statetype() {
      return this.State ? "down" : "up";
    },
  },
};
</script>
<style scoped>
.home {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* 头部 */
.header {
  width: 100%;
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: #efefef;
  color: #1a1a1a;
  position: fixed;
  top: 0;
}
.icon-cuowu {
  font-size: 30px;
  margin-left: 10px;
}
.icon-caidan_2 {
  font-size: 25px;
  margin-right: 10px;
}
.header .hearder-title {
  font-size: 20px;
}
/* 头部 */

.main .content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 14px;
  line-height: 30px;
  border-bottom: 1px solid #ebebeb;
}

/* 公共样式 */
.title {
  text-align: left;
  margin-left: 10px;
  font-weight: 500;
  min-height: 30px;
  width: 50%;
}
.info {
  margin-right: 10px;
  color: #8b8b8b;
  min-height: 30px;
  text-align: right;
  width: 40%;
}
.info {
	margin-right: 10px;
	color: #8b8b8b;
	min-height: 30px;
	text-align: right;
	width: 60%;
}
/* 公共样式 */

/* 菜单箭头翻转 */
.applicant-wrapper {
  height: 30px;
  overflow: hidden;
  transition: height 0.5s;
}
.main .applicant-wrapper-two {
  transition: height 0.5s;
  overflow: hidden;
  min-height: 30px;
}
.main .menu-content .down-top {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  float: right;
}
.icon-jiantou_liebiaozhankai_o {
  font-size: 40px;
  color: #999;
  margin-right: 10px;
}
.main .menu-content .down-top .down {
  -webkit-transition: transform 0.25s linear;
  -moz-transition: transform 0.25s linear;
  -o-transition: transform 0.25s linear;
  transition: transform 0.25s linear;
}
.main .menu-content .down-top .up {
  transform: rotate(180deg);
  -webkit-transition: transform 0.25s linear;
  -moz-transition: transform 0.25s linear;
  -o-transition: transform 0.25s linear;
  transition: transform 0.25s linear;
}
/* 菜单箭头翻转 */

.main .menu-content {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.main .menu-content .menu-title {
  text-align: left;
  margin-left: 10px;
  font-weight: 500;
  min-height: 30px;
}
ul {
	padding-left: 0;
}
ul li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 14px;
  line-height: 30px;
  border-bottom: 1px solid #ebebeb;
  margin-left: 15px;
  margin-right: 10px;
}
.Site {
  text-align: left;
}
.Site .Site-title {
  padding-left: 25px;
  font-size: 14px;
}
.Site .Site-photos {
  margin-top: 10px;
  margin-left: 30px;
  width: 60%;
}
.Site .Site-photos img {
  padding-left: 10px;
  width: 60px;
  height: 60px;
}

.kongge {
  height: 30px;
  background: #efefef;
}
.applicant-title {
  height: 40px;
  display: flex;
  font-size: 14px;
  font-weight: bold;
  flex-direction: row;
  align-items: center;
}
.strip {
  margin-left: 3px;
  height: 25px;
  width: 3px;
  background: #52adfc;
}
.people{
  margin-left: 5px;
  
}
.autograph {
  text-align: left;
  padding-bottom: 20px;
}
.autograph .autograph-photos img {
  width: 30%;
  height: 60px;
  margin-left: 25px;
}
.kongge2 {
  height: 10px;
  background: #efefef;
}
</style>
